<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- {{}} -->
        <!-- v-for -->
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
            }
        })


        //1. new Vue  实例诞生
        //2. 初始化了声明周期和生命周期中的事件
        //3. 初始化数据
        //4. 检测是否有el选项
        //5. 检测是否有template选项
        //6. no,  将el指向的元素的html代码编译成模板
        //7. 将模板用数据填充，创建出来了vm.$el（有数据的html代码）, 接着用vm.$el把页面中的el所在位置的元素给替换掉了
        //8. 此时页面已经进入稳定的运行状态了
            // 此时开始监听数据的变化
            // 当数据发生变化的时候，vue更新页面内容
            // 继续监听

        //9. vue实例不会自然死亡的 - - 当我们调用vm.$destory方法的时候，
        //10. 卸载所有的数据监听、组件、事件监听
        //11. vue实例入土为安了（死了）


        

    </script>
</body>

</html>